<template>
    <div>
        <nav-bar title='新闻列表' />
        <ul>
            <li v-for='newsList in newsLists' :key="newsList.id">
                <router-link :to='{name: "news.details",query:{id:newsList.id}}'>
                    <div class="cms-left">
                        <img :src="newsList.img_url" alt="">
                    </div>
                    <div class="cms-right">
                       <h3>{{newsList.title}}</h3>
                       <div class="cms-right-bottom">
                            <p>点击数：{{newsList.click}}</p>
                            <p>发表时间：{{newsList.add_time | convertTime('YYYY-MM-DD')}}</p>
                        </div>
                    </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                newsLists: ''
            }
        },
        created () {
            this.$axios.get(process.env.API_HOST + 'getnewslist')
            .then(res => {
                this.newsLists = res.data.message
            })
            .catch(err => console.log("err",err))
        }
    }
</script>
<style scoped>
    ul{
        padding: 0 10px;
    }
    ul li{
        display: flex;
        padding: 10px 0;
        border-bottom: 1px solid #ccc;
    }
    ul li a{
        display: flex;
    }
    ul li a .cms-left{
        width: 60px;
    }
    .cms-left img{
        width: 60px;
        height: 60px;
    }
    .cms-right {
        padding-left: 5px;
    }
    .cms-right h3{
        font-weight: normal;
        font-size: 16px;
        height: 40px;
        margin-bottom: 5px;
        line-height: 20px;
    }
    .cms-right-bottom{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .cms-right-bottom p{
        font-size: 12px;
        color: green;
    }
</style>
